<template>
  <div class="mydetails">
    <div class="mydetails_title">
      <span @click="$router.back()">返回上一级</span>
      <div class="mydetails_title_centent">
        <div class="mydetails_title_centent_t">
          <h3>{{ titleCentent.articleTitle }}</h3>
        </div>
        <div class="mydetails_title_centent_b">
          <p>{{ titleCentent.createTime }}</p>
          <p>阅读量 :{{ titleCentent.browseTotal }}</p>
        </div>
      </div>
    </div>
    <div class="mydetails_main">
      <div class="mydetails_main_item" v-for="(item, index) in shareDataList" :key="index">
        <div class="mydetails_main_L">
          <div class="mydetails_main_item_img">
            <img :src="imgBaseUrl + item.headPortrait" alt />
          </div>
          <div class="mydetails_main_item_content">
            <div class="userinfo">{{ item.nickName }}</div>
            <div class="date">阅读时间:{{ item.createTime }}</div>
          </div>
        </div>
        <div class="mydetails_main_item_btn changeHanld" @click="dialogVisible = true">联系TA</div>
        <el-dialog
          v-model="dialogVisible"
          width="320px"
          center
          :close-on-click-modal="false"
          title="联系他"
        >
          <div class="dialog_item">
            <span>{{ item.phone }}</span>
            <el-button type="primary" @click="dialogVisible = false">我知道了</el-button>
          </div>
        </el-dialog>
      </div>
    </div>

    <div class="pageList">
      <paging ref="paging_zi" @CurrentPage="accept_CurrentValue" />
    </div>
  </div>
</template>

<script>
import paging from "../../../components/paging.vue";
import { commonRequest, postRequest, imgBaseUrl } from "../../../api/api.js";
export default {
  name: "statistics_details",
  components: {
    paging
    // dialog,
  },
  data() {
    return {
      isshow: false,
      shareDataList: [],
      dialogVisible: false,
      titleCentent: "",
      imgBaseUrl: ""
    };
  },
  mounted() {
    this.imgBaseUrl = imgBaseUrl;
    this.getShareList();
    this.gettitleList();
  },
  methods: {
    accept_CurrentValue: function(value) {
      console.log(value);
    },
    getShareList() {
      let { id } = this.$route.query;
      // console.log(id);
      commonRequest("/api/ums/umsArticleShare/getArticleShareInfo", {
        id
      }).then(res => {
        // console.log(res);
        this.shareDataList = res.records;
        this.$refs.paging_zi.totalValue(res.pages);
      });
    },
    gettitleList() {
      let { id } = this.$route.query;
      commonRequest("/api/ums/umsArticleShare/getArticleDetail", {
        id
      }).then(res => {
        // console.log();
        this.titleCentent = res;
      });
    }
  }
};
</script>

<style lang="less" scoped>
.mydetails {
  .mydetails_title {
    width: 900px;
    height: 160px;
    padding: 5px 25px;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    span {
      border: 1px solid #44a2ff;
      display: inline;
      color: #44a2ff;
      font-size: 14px;
      width: 90px;
      height: 30px;
      display: flex;
      justify-content: center;
      align-items: center;
      background: #ffffff;
      border: 1px solid #44a2ff;
      border-radius: 4px;
    }
    .mydetails_title_centent_t {
      margin: 20px 0;
      h3 {
        font-size: 20px;
        color: #333333;
      }
    }
    .mydetails_title_centent_b {
      display: flex;

      p {
        margin-right: 20px;
        color: #999;
      }
    }
  }
  .mydetails_main {
    margin: 20px 0;
    .mydetails_main_item {
      border-top: 1px solid #ccc;
      padding-left: 30px;
      height: 100px;
      width: 100%;
      align-items: center;
      justify-content: space-between;
      display: flex;
      .mydetails_main_L {
        display: flex;
        justify-content: space-around;
        align-items: center;
        .mydetails_main_item_img {
          width: 60px;
          height: 60px;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .mydetails_main_item_content {
          height: 100%;
          display: flex;
          margin-left: 20px;
          justify-content: space-around;
          flex-direction: column;
          .userinfo {
            margin-bottom: 10px;
          }
          .date {
            margin-top: 10px;
            color: #ccc;
          }
        }
      }
      .mydetails_main_item_btn {
        background-color: #44a2ff;
        color: #fff;
        border-radius: 4px;
        padding: 4px 12px;
      }
    }
    .dialog_item {
      display: flex;
      flex-direction: column;
      span {
        margin: 40px auto;
      }
    }
  }
  .pageList {
    height: 100px;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
  }
}
</style>
